{extend name="$_admin_base_layout" /}

{block name="plugins-css"}
<link href="__LIBS__/jstree/themes/default/style.min.css" rel="stylesheet" />
{/block}

{block name="content"} 
<style type="text/css">
.center{text-align: center!important;}
.panel{
	width:100%;background-color: #fff;padding:15px 20px;display: inline-block;vertical-align: top;
}
.panel-title{
	border-left:4px solid #ff6c9d;padding-left: 10px;
}
.card{
	width:150px;height:90px;color:#fff;display: inline-block;margin:20px 30px;border-radius: 3px;vertical-align: top;
	padding-top:10px;
}
.card div{font-size: 13px;}
.card-data{font-size: 32px!important;font-weight:300;}
.card-purple{
	background: linear-gradient(to right,#9C58C8,50%,#CB96D6);
}
.card-blue{
	background: linear-gradient(to right,#3AA6D9,50%,#63BACB);
}
.card-yellow{
	background: linear-gradient(to right,#F0A622,50%,#EBBB2A);
}
.card-pink{
	background: linear-gradient(to right,#FD438F,50%,#FE6983);
}
.card-green{
	background: linear-gradient(to right,#7BC69F,50%,#07C160);
}
.panel table{
	height: 300px;overflow-y: scroll;width:80%;margin-top:15px;border:1px solid #f5f5f5;
}
.panel table td,.panel table th{
	padding:7px 10px;vertical-align: top;
} 
 
.tips{
	color:#999;font-size: 12px;padding-left: 20px
}
.small{
	font-size: 11px; 
}
</style>
{notempty name="latest"}
<div class="panel">
 	<div class="panel-title">小程序用户<span class="tips"> 数据截至{$latest['date']}	 , 数据仅供参考，请以小程序官方后台统计为准</span></div>
 	<div class="panel-abody center">
 		<div class="card card-blue"> 
 			<div class="card-data"><?php echo (isset($latest['visit_total'])?$latest['visit_total']:0);?><span class="small">人</span></div>
 			<div>用户总数</div>
 		</div>
 		<div class="card card-purple"> 
 			<div class="card-data"><?php echo (isset($latest['visit_uv_new'])?$latest['visit_uv_new']:0);?></div> 
 			<div>当日新增用户</div>
 		</div>
 		<div class="card card-yellow">
 			
 			<div class="card-data"><?php echo (isset($latest['visit_uv'])?$latest['visit_uv']:0);?></div> 
 			<div>当日访问人数</div>
 		</div>
 		<div class="card card-pink"> 
 			<div class="card-data"><?php echo (isset($month['visit_uv_new'])?$month['visit_uv_new']:0);?></div> 
 			<div>本月新增用户</div>
 		</div>
 		<div class="card card-green"> 
 			<div class="card-data"><?php echo (isset($month['visit_uv'])?$month['visit_uv']:0);?></div> 
 			<div>本月访问人数</div>
 		</div>
 	</div>
</div> 

<div class="panel">
 	<div class="panel-title">小程序用户画像<span class="tips"> 数据截至{$latest['date']} </span></div>
 	<div class="panel-abody center">
 		 <div id="map" style="width:1320px;height:420px;margin:0 auto;"></div>
 		<!-- <div class="card card-green"> 
 			<div class="card-data">{}</div> 
 			<div>退款金额</div>
 		</div> -->
 	</div>
</div>
<div class="panel">
    <div class="panel-title">近30天趋势<span class="tips"> 数据截至{$latest['date']} </span></div>
    <div class="panel-abody center">
          <div id="main" style="width:100%;height:320px;"></div>
    </div>
</div>
 {/notempty}

{/block}

{block name="script"}  
<script src="__LIBS__/echarts/echarts.min.js?v={:config('asset_version')}"></script> 
<script src="__LIBS__/echarts/china.js?v={:config('asset_version')}"></script>  
<script type="text/javascript">
	 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = option = {
    tooltip: { 
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    // toolbox: {
    //     feature: {
    //         dataView: {show: true, readOnly: false},
    //         magicType: {show: true, type: ['line', 'bar']},
    //         restore: {show: true},
    //         saveAsImage: {show: true}
    //     }
    // },
    legend: {
        data: ['新用户数', '用户总数','日访问量']
    },
    xAxis: [
        {
            type: 'category',
            data:<?php echo json_encode(array_column($day30,'id'))?>,
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '人数',
            min: 0,  
            splitLine:{
            	show:false
            },
            axisLabel: {
                formatter: '{value}人'
            }
        }  
    ],
    series: [
        {
            name: '新用户数',
            type: 'bar',
            data:<?php echo json_encode(array_column($day30,'   visit_uv_new'))?>
        }, 
        {
            name: '用户总数',
            type: 'line', 
            data: <?php echo json_encode(array_column($day30,'visit_total'))?>
        },
         {
            name: '日访问量',
            type: 'line', 
            data: <?php echo json_encode(array_column($day30,'visit_uv'))?>
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
var option2 = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    title:[
        {
            text: '性别分布',
                x: '12%',
                y: '85%',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 'normal',
                  color: '#465166'
            }
        },
        {
            text: '城市分布',
                x: '46%',
                y: '85%',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 'normal',
                  color: '#465166'
            }
        },
        {
            text: '年龄段分布',
                x: '80%',
                y: '85%',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 'normal',
                  color: '#465166'
            }
        }
    ], 
    series: [
        {
            name: '性别',
            type: 'pie',
            left:50,
            width:300,
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: true, 
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            },
            data: <?php echo isset($user['genders'])?json_encode($user['genders']):[];?>
        },
        {
            name: '城市',
            type: 'pie', 
            width:700,
            left:300,
             
            labelLine: {
                lineStyle: {
                    color: '#ccc'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            radius: [30, 110], 
            roseType: 'area',
            data: <?php echo isset($user['city'])?json_encode($user['city']):'[]';?>
        } ,
        {
            name: '年龄段',
            type: 'pie', 
            left:950,
            width:300,
            avoidLabelOverlap: false,
            label: {
                show: true 
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            },
            data: <?php echo isset($user['ages'])?json_encode($user['ages']):'[]';?>
        }
         
    ]
};
var mapChart = echarts.init(document.getElementById('map')); 
    mapChart.setOption(option2);  
</script>
{/block}


